import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import { Provider } from 'react-redux';
import { store } from './store';
import zhCN from 'antd/locale/zh_CN';

// Layouts
import MainLayout from './layouts/MainLayout';

// Pages
import Login from './pages/auth/Login';
import Register from './pages/auth/Register';
import NotFound from './pages/NotFound';
import Dashboard from './pages/Dashboard';
import LanguageList from './pages/language/LanguageList';
import ComponentList from './pages/component/ComponentList';
import UserList from './pages/user/UserList';
import LogList from './pages/log/LogList';
import Profile from './pages/Profile';

// Auth Guard Component
import PrivateRoute from './components/PrivateRoute';
import ChangePassword from './pages/ChangePassword';

const App: React.FC = () => {
  // In a real app, this would come from user preferences or system settings
  const locale = zhCN; // Default to Chinese

  return (
    <Provider store={store}>
      <ConfigProvider locale={locale}>
        <BrowserRouter>
          <Routes>
            {/* Public routes */}
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />

            {/* Protected routes */}
            <Route path="/" element={<MainLayout />}>
              <Route index element={<Navigate to="/dashboard" replace />} />
              <Route path="dashboard" element={<PrivateRoute requiredRole={2}><Dashboard /></PrivateRoute>} />
              <Route path="profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
              <Route path="components" element={<PrivateRoute><ComponentList /></PrivateRoute>} />
              <Route path="languages" element={<PrivateRoute requiredRole={2}><LanguageList /></PrivateRoute>} />
              <Route path="users" element={<PrivateRoute requiredRole={2}><UserList /></PrivateRoute>} />
              <Route path="logs" element={<PrivateRoute requiredRole={2}><LogList /></PrivateRoute>} />
              <Route path="changePassword" element={<PrivateRoute><ChangePassword /></PrivateRoute>} />
            </Route>

            {/* 404 route */}
            <Route path="*" element={<NotFound />} />
          </Routes>
        </BrowserRouter>
      </ConfigProvider>
    </Provider>
  );
};

export default App;